<template>
    <div >
        <div id="main" style="height: 600px;width: 800px;margin-left: 400px;margin-top: 100px"></div>
    </div>
</template>

<script>
    export default {
        name: "ecahrts",
        data(){
            return {

            }
        },
        methods:{
            initData(){
                var chartDom = document.getElementById('main');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    legend:{
                        show:true
                    },
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [10, 22, 28, 43, 49],
                            name:"hwllo",
                            type: 'line',
                        },
                        {
                            data: [5, 4, 3, 5, 10],
                            type: 'line',
                            name:"hwllo111",
                        },
                        {
                            data: [39, 222, 28, 43, 49],
                            type: 'line',
                            stack:'南',
                            name:"world",
                        },
                        {
                            data: [52, 41, 33, 35, 120],
                            name:"world22",
                            stack:'南',
                            type: 'line',
                        }
                    ]
                };
                myChart.setOption(option);
            }
        },
        mounted() {
            this.initData()
        }
    }
</script>

<style scoped>

</style>
